<template>
  <div class="header">
    <!-- 具名插槽 -->
    <!-- 作用域插槽，子组件借助插槽向父组件传值，但仅能在插槽模板内使用 -->
    <slot name="header" :data="data" :flag="false" ></slot>
  </div>
  <div class="main">
    <!-- 匿名插槽 -->
    <slot></slot>
  </div>
  <div class="footer">
    <slot name="footer"></slot>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const data = ref('a')

</script>
<style scoped>
div{
  height: 100px;
}
.header{
  background-color: pink;
}
.footer{
  background-color: lightblue;
}
.main{
  background-color: #ccc;
}
</style>